import { View, Text,Image } from "@tarojs/components";



import arrowIcon from '@/assets/images/arrow.png'
import { IOrderDetailData } from "@/typing";
import { forwardRef } from "react";
import { Countdown } from "@/components/countDown/countDown";
import { API_URL } from "@/common/serviveApi";

interface IOrder {
  orderId: number;orderIndex:number;orderPhone:string;wechat:string
}
interface IAcceptOrderItem {
  orderInfo: IOrderDetailData;
  orderIndex: number;
  handleAcceptOrder: (orderInfo: IOrder) => void;
  handleCancelOrder: (orderId: number,orderIndex:number) => void;
  handleShowOrder:(orderInfo)=>void
}
const AcceptOrderItem: React.FC<IAcceptOrderItem> = forwardRef((props, ref) => {
  const { orderInfo,orderIndex,handleAcceptOrder,handleCancelOrder ,handleShowOrder} = props
   const topicTitle = orderInfo.topic&& orderInfo.topic.title ? orderInfo.topic.title : ''
  
  return (
    <View className='mt-34px bg-#fff box-border pt-30px px-22px pb-46px w-684px mx-auto mb-34px'>
      <Countdown
          targetTimestamp={orderInfo.accept_expire_time}

          
        />
      <View className='pl-10px pr-16px box-border flex items-center justify-between mt-30px'>
        <View className='flex items-center'>
          <View className="w-56px h-56px rounded-100px overflow-hidden">
          <Image src={`${API_URL}${orderInfo.avatar}`} className="w-56px h-56px" ></Image>
          </View>
         
          <Text className='ml-18px text-#161618 text-30px'>{orderInfo.nickname}</Text>
        </View>
        <View className='flex items-center' onClick={()=>handleShowOrder(orderInfo)}>
          <Text className='text-#555 text-30px'>订单详情</Text>
          <Image src={arrowIcon} className='w-13px h-23px ml-12px'></Image>
        </View>
      </View>
      <View className='px-8px box-border mt-24px'>
        <View className='text-32px font-medium text-#161618 line-clamp-3 leading-50px'>{topicTitle}</View>
        {orderInfo.remark && <View className='text-28px  text-#555555 line-clamp-3 leading-50px mt-20px'>
        用户备注：{orderInfo.remark}
      </View>}
        
        {/* <View className='mt-20px text-#555555 text-26px'>30元/约15分钟</View> */}
      </View>
      <View className='pl-14px pr-28px box-border flex items-center justify-between mt-38px'>
        <View className='flex items-center justify-center box-border w-264px h-82px text-#333 font-bold text-30px bg-#F5F5F5' onClick={()=>handleCancelOrder(orderInfo.id,orderIndex)}>拒单</View>
        <View className='flex items-center justify-center box-border w-294px h-82px text-#fff font-bold text-30px bg-#8232E8' onClick={()=>handleAcceptOrder({orderId:orderInfo.id,orderIndex:orderIndex,orderPhone:orderInfo.mobile,wechat:orderInfo.wechat})}>接单</View>

      </View>
    </View>
  )
})
export default AcceptOrderItem;